<template>
  <section>
    <idss-widget style="padding: 10px;">
      <el-form
        :model="productForm"
        :rules="rules"
        ref="productForm"
        label-width="100px"
        class="demo-productForm"
        :disabled="canEdit"
      >
        <el-form-item label="名称" prop="title">
          <el-input v-model="productForm.title" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="describe">
          <el-input v-model="productForm.describe" placeholder="请输入描述"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="img">
          <el-upload
            class="upload-demo"
            ref="upload"
            action
            :on-change="imgPreview"
            :file-list="fileList"
            :on-exceed="handleExceed"
            list-type="picture"
            :limit="1"
            :auto-upload="false"
          >
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="内容" prop="content" style="height: 300px;">
          <quill-editor
            style="height: 200px"
            v-model="productForm.content"
            :options="editorOption"
          />
        </el-form-item>
        <el-form-item label="分类" prop="type">
          <el-select v-model="productForm.productTypes" placeholder="请选择分类" multiple collapse-tags>
            <el-option v-for="item in types" :label="item.typeName" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在区域">
          <el-select
            v-model="productForm.province"
            placeholder="请选择省份"
            @change="changeCitys(productForm.province)"
          >
            <el-option
              v-for="item in provinces"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
          <el-select
            v-model="productForm.city"
            placeholder="请选择市"
            v-if="citys.length"
            @change="getAreas(productForm.city)"
          >
            <el-option v-for="item in citys" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
          <el-select v-model="productForm.area" placeholder="请选择县/区" v-if="areas.length">
            <el-option v-for="item in areas" :label="item.name" :value="item.id" :key="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="productForm.link"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('productForm')">立即创建</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </idss-widget>
  </section>
</template>
<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";
import service from "./service";
export default {
  mixins: [service],
  data() {
    return {
      productForm: {
        title: "", // 商品名
        describe: "", // 商品简介
        img: "", // 商品封面
        content: "", //商品内容
        productTypes: [], // 商品所属分类
        province: "", // 所属省份
        city: "", // 所属城市
        area: "", // 所属区或者县
        link: "" // 商品链接
      },
      canEdit: false,
      editorOption: {
        placeholder: "请输入内容"
      },
      types:[],
      fileList: [],
      fileReader: new FileReader(),
      rules: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        describe: [{ required: true, message: "请输入描述", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        productTypes: [{ required: true, message: "请选择分类", trigger: "change" }],
        province: [
          { required: true, message: "请选择省份", trigger: "change" }
        ],
        city: [{ required: true, message: "请选择城市", trigger: "change" }]
      }
    };
  },
  methods: {
    handleExceed(files, fileList) {
      this.$message.warning(`图片只能上传一个,请先移除已上传的图片!`);
    },
    changeCitys() {
      let { city = "", area = "" } = this.productForm;
      this.getCitys(this.productForm.province);
    },
    imgPreview(file, fileList) {
      if (file.raw) {
        this.fileReader.readAsDataURL(file.raw);
      }
      this.fileReader.onload = () => {
        this.productForm.cover = this.fileReader.result;
      };
    },
    // 获取分类
    getTypes() {
      this.$axios({
        url: "/api/services/app/ProductType/GetAll",
        method: "Get"
      }).then(res => {
        this.types = res.data.result.items;
      });
    },
    // 根据id获取商品
    getProductById(id) {
      this.$axios({
        url: "/api/services/app/ProductInfo/Get",
        method: "Get",
        params: {
          id: id
        }
      }).then(res => {
        this.productForm = res.data.result;
      });
    },
    // 取消跳转列表页面
    cancel() {
      this.$router.push({ path: `/product` });
    }
  },
  mounted() {
    // 编辑跟查看根据id查询详情
    if (this.$route.query.type !== "add") {
      this.getProductById(this.$route.query.param);
      this.$route.query.type === "look"
        ? (this.canEdit = true)
        : (this.canEdit = false);
    } else {
      this.canEdit = false;
    }
    this.getTypes(); // 获取所有分类
  },
  components: {
    quillEditor
  }
};
</script>
